<template>
  <div>
    <FormProvider :form="form" ref="EditContextFont">
      <FormLayout :labelCol="8" :wrapperCol="24" size="default" :gridRowGap="8">
        <SchemaField :schema="baseSytleConfig" :scope="{ formCollapse }" />
      </FormLayout>
    </FormProvider>
  </div>
</template>
  
<script>
import { baseSytleConfig } from "./base.config";
import { calcWH } from "@/utils/calcWH";
import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/core";
import { createSchemaField, FormProvider } from "@formily/vue";
import {
  FormLayout,
  FormItem,
  Input,
  Space,
  InputNumber,
  Select,
  Switch,
  Upload,
  FormGrid,
  FormCollapse,
  Radio,
} from "@formily/element";
import { ElColorPicker, ElSlider,Button} from "element-ui";
import PickerInput from '@/components/ReEncapsulation/InputColorPicker/index'
import InputButton from '@/components/ReEncapsulation/XButton/index'
const { SchemaField } = createSchemaField({
  components: {
    FormLayout,
    FormItem,
    Input,
    Space,
    InputNumber,
    Select,
    Switch,
    ElColorPicker,
    ElSlider,
    Upload,
    FormGrid,
    FormCollapse,
    Radio,
    PickerInput,
    Button,
    InputButton
  },
});

export default {
  components: {
    FormProvider,
    FormLayout,
    SchemaField,
  },
  data() {
    const baseConfig = this.$store.state.baseConfig;
    const obj = {
      ...baseConfig,
    };
    const _this = this;
    const formCollapse = FormCollapse.createFormCollapse();

    const form = createForm({
      initialValues: { ...obj },
      effects() {
        onFormValuesChange((form) => {
          const editContextFont = JSON.parse(JSON.stringify(form.values));
          _this.widthAndHeight = {
            width: editContextFont.width,
            height: editContextFont.height,
          };

          _this.$bus.$emit("EditContextFont", editContextFont);
        });
        onFieldValueChange("attachment", (field) => {
          form.setFieldState("position", (state) => {
            //对于初始联动，如果字段找不到，setFieldState会将更新推入更新队列，直到字段出现再执行操作
            state.display = field.value?'visible':'none';
          });
        });
        // onFieldChange('isLock', (field,form) => {
        //   let editContextFont = JSON.parse(JSON.stringify(form.values))
        //   if (form.values.isLock) {
        //     if (_this.widthAndHeight.width == form.values.width) {
        //       editContextFont.width = calcWH({ ..._this.widthAndHeight }, form.values.height)

        //       _this.form.setValuesIn('width', editContextFont.width)
        //     } else if (_this.widthAndHeight.height == form.values.height) {
        //       editContextFont.height = calcWH({ ..._this.widthAndHeight }, form.values.width)
        //       _this.form.setValuesIn('height', editContextFont.height)
        //     }
        //   }

        //   _this.$bus.$emit('EditContextFont', editContextFont)
        // });
      },
    });

    return {
      form,
      baseSytleConfig,
      widthAndHeight: null,
      formCollapse,
    };
  },
  created() {
    this.widthAndHeight = {
      width: this.$store.state.baseConfig.width,
      height: this.$store.state.baseConfig.height,
    };
  },
  methods: {},
  watch: {},
  mounted() {},
};
</script>

<style>
</style>